<script setup>
import {inject, onMounted, ref} from "vue";
import {getAllDialogues} from "@/js/apiHelper";
import {message} from "ant-design-vue";
import {timeCorrect} from "@/js/jsHelper";

onMounted(()=>{
  token.value = localStorage.getItem('token')
  getAllDialoguesByToken(token.value);
})
//获取当前用户已有的全部对话
const dialogues = ref([])
const token = ref('')
const getAllDialoguesByToken=(token)=>{
  const postResult = getAllDialogues(token)
  postResult.then(response=>{
    if (response.data.success === 1){
      const dialogueList = response.data.data;
      for (const dialogueListElement of dialogueList) {
        dialogueListElement.createTime = timeCorrect(dialogueListElement.createTime)
      }
      dialogues.value = dialogueList
    }else{
      message.error('获取对话列表出错')
    }
  }).catch(e=>{
    message.error('获取对话列表出错，'+e)
  })
}
//选择对话
const selectedId = ref('')
const changeDialogue = inject('changeDialogue')
const chooseDialogue=(dialogueId,otherUserId,messageId)=>{
  changeDialogue({
    dialogueId:dialogueId,
    otherUserId:otherUserId,
    messageId:messageId
  })
  selectedId.value = dialogueId
}

</script>

<template>
  <div class="dialogue-all-container">
    <div class="dialogue-item" v-for="(dialogue, index) in dialogues" :key="index">
      <div>{{dialogue.createTime}}</div>
      <div v-if="dialogue.orderNo!=='-1'">订单编号: {{dialogue.orderNo}}</div>
      <div v-else>管理员对话</div>
      <div>对方: {{dialogue.otherNickName}}</div>
      <div>物品: {{dialogue.stuffName}}</div>
      <a-button disabled v-if="selectedId === dialogue.messageId" type="primary" size="small" class="select-btn">当前</a-button>
      <a-button v-else @click="chooseDialogue(dialogue.messageId, dialogue.otherUserId, dialogue.messageId)" type="primary" size="small" class="select-btn">选择</a-button>
      <a-divider class="a-divider"/>
    </div>
  </div>
</template>

<style scoped>
  .dialogue-all-container{
    height: calc(100% - 12px);
    width: 312px;
    background-color: #fbfbfb88;
    border-radius: 8px;
    box-shadow: 2px 2px 8px rgba(0,0,0,0.1);
    user-select: none;
    padding: 16px 12px;
    display: flex;
    flex-direction: column;
    overflow-y: scroll;
  }
  .dialogue-item{
    width: 100%;
    height: auto;
    position: relative;
    white-space: nowrap;
  }
  .dialogue-item div:nth-child(1){
    position: absolute;
    right: 0;
    top: 0;
    font-size: 12px;
    color: #555;
  }
  .dialogue-item div:nth-child(2){
    position: absolute;
    left: 0;
    top: 0;
    font-size: 12px;
    color: #555;
  }
  .dialogue-item div:nth-child(3){
    margin-top: 20px;
    margin-bottom: 4px;
    font-size: 14px;
  }
  .dialogue-item div:nth-child(4){
    font-size: 14px;
  }
  .select-btn{
    position: absolute;
    right: 0;
    bottom: 24px;
    font-size: 12px;
  }
  .a-divider{
    margin: 8px 0 16px 0;
  }
</style>